<template>
  <section class="main">
    <ul class="todo-list">
      <li :class="{ completed: item.completed }" v-for="item in showList" :key="item.id">
        <div class="view">
          <input class="toggle" :checked="item.completed" @change="store.commit('changeDone', item.id)" type="checkbox" />
          <label>{{ item.content }}</label>
          <button class="destroy" @click="store.commit('delById', item.id)"></button>
        </div>
        <input class="edit" />
      </li>
    </ul>
  </section>
</template>

<script lang="ts" setup>
// 💥 问题标记：store.commit('没有代码提示')
import { TodoState } from '@/store'
import { computed, toRefs } from '@vue/reactivity'
import { watch } from '@vue/runtime-core'
import { useStore } from 'vuex'

const store = useStore<TodoState>()
// 获取仓库中的 list 和 status
const { list, status } = toRefs(store.state)

// 9. 底部 - 计算显示列表(全部显示/未完成/已完成)
const showList = computed(() => {
  if (status.value === 'active') {
    return list.value.filter(v => !v.completed)
  } else if (status.value === 'completed') {
    return list.value.filter(v => v.completed)
  } else {
    return list.value
  }
})

// 数据被更新时 - 设置本地存储数据
watch(list.value, () => {
  localStorage.setItem('todos-list', JSON.stringify(list.value))
})

watch(status, () => {
  localStorage.setItem('todos-status', status.value)
})

</script>
